<template>
  <!-- 病历控件 -->
  <section>
    <div v-if="form.component=='DATE'">
      <el-date-picker v-model="formValue" @change="onSubmit('change')" value-format="yyyy-MM-dd" type="date" placeholder="请选择"></el-date-picker>
    </div>
    <div v-else-if="form.component=='DATETIME'">
      <el-date-picker v-model="formValue" @change="onSubmit('change')" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="请选择"></el-date-picker>
    </div>
    <div v-else-if="form.component=='TEXTAREA'">
      <chiefComplaint :width="600" :disabled="form.name=='主诉'?false:true" @update="onUpdateZS">
        <el-input v-model="formValue" @blur="onSubmit('blur')" type="textarea" :rows="3"></el-input>
      </chiefComplaint>
    </div>
    <div v-else-if="form.component=='TEXT'">
      <el-input v-model="formValue" @blur="onSubmit('blur')"></el-input>
    </div>
    <div v-else-if="form.component=='CHECKBOX'">
      <div v-if="form.name=='初步诊断'">
        <el-tag v-for="(item,index) in arrayValue" :key="index" closable @close="onDelFirstVisit(index)" type="info" style="margin:0 10px 10px 0;">{{item.firstVist}}</el-tag>
        <dialogFirstVisit @success="onSuccessFirstVisit" :deptId="deptId" :doctorId="doctorId"></dialogFirstVisit>
      </div>
      <div v-else>
        <el-checkbox-group v-model="arrayValue" @change="onSubmit('change')">
          <el-checkbox v-for="(item,index) in componentValue" :key="index" :label="item.id">{{item.value}}</el-checkbox>
        </el-checkbox-group>
      </div>
    </div>
    <div v-else-if="form.component=='RADIO'">
      <el-radio-group v-model="formValue" @change="onSubmit('change')">
        <el-radio v-for="(item,index) in componentValue" :key="index" :label="item.id">{{item.value}}</el-radio>
      </el-radio-group>
    </div>
    <div v-else-if="form.component=='SELECT'">
      <el-select v-model="formValue" placeholder="请选择" @change="onSubmit('change')">
        <el-option v-for="(item,index) in componentValue" :key="index" :label="item.value" :value="item.id"></el-option>
      </el-select>
    </div>
  </section>
</template>
<script>
export default {
  props: ["value", "form", "deptId", "doctorId", "cureFirstVisitRecord"],
  components: {
    chiefComplaint: () => import("@/pages/_com/chiefComplaint.vue"),
    dialogFirstVisit: () => import("./dialogInitialGuess.vue")
  },
  data() {
    return {
      formValue: "",
      arrayValue: [],
      componentValue: []
    };
  },
  created() {
    let th = this;
    th.onInit();
  },
  methods: {
    onInit() {
      const th = this;
      if (th.form.name == "初步诊断") {
        //强制清空
        if (th.value == "[]") {
          th.$emit("input", "");
        }
      } else if (
        th.form.component == "RADIO" ||
        th.form.component == "SELECT"
      ) {
        if (th.form.componentValue)
          th.componentValue = JSON.parse(th.form.componentValue);
        th.formValue = th.value || "";
      } else if (th.form.component == "CHECKBOX") {
        if (th.form.componentValue)
          th.componentValue = JSON.parse(th.form.componentValue);
        th.arrayValue = th.value ? th.value.split(",") : [];
      } else {
        th.formValue = th.value;
      }
    },
    onSubmit(type) {
      let th = this;
      //判断是否数组
      if (th.arrayValue.length > 0) {
        th.$emit("input", th.arrayValue.join(","));
      } else {
        th.$emit("input", th.formValue);
      }
      //判断如果为末次月经就算预产期
      if (th.form.name == "末次月经" && th.formValue) {
        th.$emit("lastPeriod", th.formValue);
      }
      if (th.form.notNull) th.$emit("validate");
    },
    //快捷选择主诉
    onUpdateZS(str) {
      let th = this;
      if (th.formValue) th.formValue += ",";
      th.formValue += str;
      th.$emit("input", th.formValue);
      if (th.form.notNull) th.$emit("validate");
    },
    //添加初步诊断
    onSuccessFirstVisit(obj) {
      let th = this;
      let arr = th.arrayValue.filter(d => {
        return d.firstVist == obj.firstVist;
      });
      if (arr.length == 0) th.arrayValue.push(obj);
      this.sendFirstVisitArr();
    },
    //推送初步诊断
    sendFirstVisitArr() {
      let th = this;
      let arr = [];
      let str = "";
      th.arrayValue.forEach(d => {
        arr.push(d.id);
      });
      if (arr.length > 0) {
        str = JSON.stringify(arr);
      }
      th.$emit("input", str);
      if (th.form.notNull) th.$emit("validate");
    },
    //删除初步诊断
    onDelFirstVisit(index) {
      this.arrayValue.splice(index, 1);
      this.sendFirstVisitArr();
    }
  },
  watch: {
    value(n, o) {
      const th = this;
      th.formValue = n;
    },
    cureFirstVisitRecord: {
      deep: true,
      immediate: true,
      handler: function(n) {
        if (this.form.name == "初步诊断") this.arrayValue = n || [];
      }
    }
  }
};
</script>